<script>

export default {
  name: "Dashboard",
  mounted() {
    // 控制 api-item 点击选中样式
    var apiItem01 = document.getElementById("api-item-01")
    var apiItem02 = document.getElementById("api-item-02")
    var apiItem03 = document.getElementById("api-item-03")
    var apiItem04 = document.getElementById("api-item-04")
    // 设置默认选中第一个
    apiItem01.style.background = "gray";
    apiItem01.childNodes[1].style.color = "white"
    // 动态监听每一个
    apiItem01.onclick = function () {
      apiItem01.style.background = "gray";
      apiItem01.childNodes[1].style.color = "white"
      apiItem02.style.background = "";
      apiItem02.childNodes[1].style.color = "gray";
      apiItem03.style.background = "";
      apiItem03.childNodes[1].style.color = "gray";
      apiItem04.style.background = "";
      apiItem04.childNodes[1].style.color = "gray";
    }
    apiItem02.onclick = function () {
      apiItem01.style.background = "";
      apiItem01.childNodes[1].style.color = "gray";
      apiItem02.style.background = "gray";
      apiItem02.childNodes[1].style.color = "white"
      apiItem03.style.background = "";
      apiItem03.childNodes[1].style.color = "gray";
      apiItem04.style.background = "";
      apiItem04.childNodes[1].style.color = "gray";
    }
    apiItem03.onclick = function () {
      apiItem01.style.background = "";
      apiItem01.childNodes[1].style.color = "gray";
      apiItem02.style.background = "";
      apiItem02.childNodes[1].style.color = "gray";
      apiItem03.style.background = "gray";
      apiItem03.childNodes[1].style.color = "white"
      apiItem04.style.background = "";
      apiItem04.childNodes[1].style.color = "gray";
    }
    apiItem04.onclick = function () {
      apiItem01.style.background = "";
      apiItem01.childNodes[1].style.color = "gray";
      apiItem02.style.background = "";
      apiItem02.childNodes[1].style.color = "gray";
      apiItem03.style.background = "";
      apiItem03.childNodes[1].style.color = "gray";
      apiItem04.style.background = "gray";
      apiItem04.childNodes[1].style.color = "white"
    }

    // 控制 right-top-tab 点击选中样式
    var rightTopTab01 = document.getElementById("right-top-tab-01")
    var rightTopTab02 = document.getElementById("right-top-tab-02")
    var rightTopTab03 = document.getElementById("right-top-tab-03")
    var rightTopTab04 = document.getElementById("right-top-tab-04")
    // 设置默认选中第一个
    rightTopTab01.style.background = "white";
    rightTopTab01.style.border = "#1890ff 1px solid";
    rightTopTab01.childNodes[1].style.color = "gray"
    rightTopTab01.childNodes[2].childNodes[0].style.color = "gray"
    // 动态监听每一个
    rightTopTab01.onclick = function () {
      rightTopTab01.style.background = "white";
      rightTopTab01.style.border = "#1890ff 1px solid";
      rightTopTab01.childNodes[1].style.color = "gray"
      rightTopTab01.childNodes[2].childNodes[0].style.color = "gray"
      rightTopTab02.style.background = "";
      rightTopTab03.style.background = "";
      rightTopTab04.style.background = "";
    }
    rightTopTab02.onclick = function () {
      rightTopTab01.style.background = "";
      rightTopTab02.style.background = "white";
      rightTopTab02.style.border = "#1890ff 1px solid";
      rightTopTab02.childNodes[1].style.color = "gray"
      rightTopTab02.childNodes[2].childNodes[0].style.color = "gray"
      rightTopTab03.style.background = "";
      rightTopTab04.style.background = "";
    }
    rightTopTab03.onclick = function () {
      rightTopTab01.style.background = "";
      rightTopTab02.style.background = "";
      rightTopTab03.style.background = "white";
      rightTopTab03.style.border = "#1890ff 1px solid";
      rightTopTab03.childNodes[1].style.color = "gray"
      rightTopTab03.childNodes[2].childNodes[0].style.color = "gray"
      rightTopTab04.style.background = "";
    }
    rightTopTab04.onclick = function () {
      rightTopTab01.style.background = "";
      rightTopTab02.style.background = "";
      rightTopTab03.style.background = "";
      rightTopTab04.style.background = "white";
      rightTopTab04.style.border = "#1890ff 1px solid";
      rightTopTab04.childNodes[1].style.color = "gray"
      rightTopTab04.childNodes[2].childNodes[0].style.color = "gray"
    }

    // 控制 select-tab 点击选中样式
    var div01 = document.getElementById("select-item-01")
    var div02 = document.getElementById("select-item-02")
    var div03 = document.getElementById("select-item-03")
    var div04 = document.getElementById("select-item-04")
    var div05 = document.getElementById("select-item-05")
    // 设置默认选中第一个
    div01.style.borderBottom = "red 3px solid";
    // 动态监听每一个
    div01.onclick = function () {
      div01.style.borderBottom = "red 3px solid";
      div02.style.borderBottom = "";
      div03.style.borderBottom = "";
      div04.style.borderBottom = "";
      div05.style.borderBottom = "";
    }
    div02.onclick = function () {
      div02.style.borderBottom = "red 3px solid";
      div01.style.borderBottom = "";
      div03.style.borderBottom = "";
      div04.style.borderBottom = "";
      div05.style.borderBottom = "";
    }
    div03.onclick = function () {
      div03.style.borderBottom = "red 3px solid";
      div01.style.borderBottom = "";
      div02.style.borderBottom = "";
      div04.style.borderBottom = "";
      div05.style.borderBottom = "";
    }
    div04.onclick = function () {
      div04.style.borderBottom = "red 3px solid";
      div01.style.borderBottom = "";
      div02.style.borderBottom = "";
      div03.style.borderBottom = "";
      div05.style.borderBottom = "";
    }
    div05.onclick = function () {
      div05.style.borderBottom = "red 3px solid";
      div01.style.borderBottom = "";
      div02.style.borderBottom = "";
      div03.style.borderBottom = "";
      div04.style.borderBottom = "";
    }
  }
}

</script>

<template>
  <div class="dashboard">
    <div class="left">
      <div class="left-search">
        <img src="../assets/搜索.svg"/>
        <input placeholder="请输入关键字查询"/>
      </div>
      <div class="left-collection">
        <div id="api-item-01" class="api-item">
          <div class="api-item-icon-get">GET</div>
          <div class="api-item-text">http://localhost:8080/get</div>
        </div>
        <div id="api-item-02" class="api-item">
          <div class="api-item-icon-post">POST</div>
          <div class="api-item-text">http://localhost:8080/post</div>
        </div>
        <div id="api-item-03" class="api-item">
          <div class="api-item-icon-put">PUT</div>
          <div class="api-item-text">http://localhost:8080/put</div>
        </div>
        <div id="api-item-04" class="api-item">
          <div class="api-item-icon-delete">DELETE</div>
          <div class="api-item-text">http://localhost:8080/delete</div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-top">
        <div id="right-top-tab-01" class="right-top-tab">
          <div class="tab-icon-get">GET</div>
          <div class="tab-text">http://localhost:8080/get</div>
          <div class="tab-close">
            <div class="tab-close-x">x</div>
          </div>
        </div>
        <div id="right-top-tab-02" class="right-top-tab">
          <div class="tab-icon-post">POST</div>
          <div class="tab-text">http://localhost:8080/post</div>
          <div class="tab-close">
            <div class="tab-close-x">x</div>
          </div>
        </div>
        <div id="right-top-tab-03" class="right-top-tab">
          <div class="tab-icon-put">PUT</div>
          <div class="tab-text">http://localhost:8080/put</div>
          <div class="tab-close">
            <div class="tab-close-x">x</div>
          </div>
        </div>
        <div id="right-top-tab-04" class="right-top-tab">
          <div class="tab-icon-delete">DELETE</div>
          <div class="tab-text">http://localhost:8080/delete</div>
          <div class="tab-close">
            <div class="tab-close-x">x</div>
          </div>
        </div>
      </div>
      <div class="right-send">
        <div class="send-type">
          <select>
            <option style="color: #15ea15" value="GET">GET</option>
            <option style="color: orange" value="POST">POST</option>
            <option style="color: blue" value="PUT">PUT</option>
            <option style="color: red" value="DELETE">DELETE</option>
          </select>
        </div>
        <div class="send-input">
          <input placeholder="请输入接口路径，如 http://localhost:8080/hello"/>
        </div>
        <div class="send-do">
          <button>发送</button>
        </div>
      </div>
      <div class="right-select">
        <div id="select-item-01" class="select-item">params</div>
        <div id="select-item-02" class="select-item">Authorization</div>
        <div id="select-item-03" class="select-item">Header</div>
        <div id="select-item-04" class="select-item">Body</div>
        <div id="select-item-05" class="select-item">Settings</div>
      </div>
      <div class="right-request">
        <div class="params">
          <table>
            <tr>
              <th></th>
              <th>KEY</th>
              <th>VALUE</th>
              <th>DESCRIPTION</th>
            </tr>

            <tr>
              <td>
                <input type="checkbox"/>
              </td>
              <td>
                <input value="孙悟空"/>
              </td>
              <td>
                <input value="男"/>
              </td>
              <td>
                <input value="花果山"/>
              </td>
            </tr>

            <tr>
              <td>
                <input type="checkbox"/>
              </td>
              <td>
                <input value="猪八戒"/>
              </td>
              <td>
                <input value="男"/>
              </td>
              <td>
                <input value="高老庄"/>
              </td>
            </tr>

            <tr>
              <td>
                <input type="checkbox"/>
              </td>
              <td>
                <input value="沙和尚"/>
              </td>
              <td>
                <input value="男"/>
              </td>
              <td>
                <input value="流沙河"/>
              </td>
            </tr>

            <tr>
              <td>
                <input type="checkbox"/>
              </td>
              <td>
                <input value="唐僧"/>
              </td>
              <td>
                <input value="男"/>
              </td>
              <td>
                <input value="女儿国"/>
              </td>
            </tr>
          </table>

        </div>
      </div>
      <div class="right-response"></div>
    </div>
  </div>
</template>

<style scoped lang="less">

.dashboard {
  width: 100%;
  height: 800px;
  display: flex;

  .left {
    width: 240px;
    height: 100%;
    border-right: 1px solid #b9b5b5;

    .left-search {
      width: 100%;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      img {
        position: absolute;
        width: 16px;
        height: 16px;
        left: 16px;
      }

      input {
        padding-left: 30px;
        width: 220px;
        height: 36px;
        border-radius: 5px;
        border: none;
        background-color: #f7f7f7;
        outline-style: none;
      }
    }

    .left-collection {
      width: 100%;
      height: 300px;
      padding-top: 10px;

      .api-item {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding-left: 10px;
        width: 100%;
        height: 40px;

        .api-item-icon-get {
          display: flex;
          align-items: center;
          width: 50px;
          height: 100%;
          color: #15ea15;
        }

        .api-item-icon-post {
          display: flex;
          align-items: center;
          width: 50px;
          height: 100%;
          color: #eaea0b;
        }

        .api-item-icon-put {
          display: flex;
          align-items: center;
          width: 50px;
          height: 100%;
          color: blue;
        }

        .api-item-icon-delete {
          display: flex;
          align-items: center;
          width: 50px;
          height: 100%;
          color: red;
          margin-right: 8px;
        }

        .api-item-text {
          width: 250px;
          color: grey;
        }

      }

    }
  }

  .right {
    width: calc(100vw - 240px);
    height: 100%;

    .right-top {
      padding-left: 10px;
      width: 100%;
      height: 40px;
      display: flex;
      padding-top: 9px;

      .right-top-tab {
        border-radius: 8px 8px 0 0;
        margin-left: 6px;
        width: 200px;
        height: 30px;
        background: #b9b5b5;
        cursor: pointer;
        display: flex;

        .tab-icon-get {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 60px;
          color: #15ea15;
        }

        .tab-icon-post {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 80px;
          color: orange;
        }

        .tab-icon-put {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 80px;
          color: blue;
        }

        .tab-icon-delete {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 80px;
          margin-left: 4px;
          margin-right: 4px;
          color: red;
        }

        .tab-text {
          width: 180px;
          display: flex;
          align-items: center;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          color: white;
        }

        .tab-close {
          width: 30px;
          position: relative;

          .tab-close-x {
            top: -2px;
            right: 5px;
            color: white;
            position: absolute;
          }
        }
      }

      .right-top-tab:hover {
        background-color: white;
        border: #1890ff 1px solid;

        .tab-text {
          color: grey;
        }

        .tab-close-x {
          color: black;
        }

      }

    }

    .right-send {
      width: 100%;
      height: 60px;
      display: flex;

      .send-type {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100%;

        select {
          outline-style: none;
          border-color: blue;
          width: 70%;
          height: 30px;
          border-radius: 6px;
          color: orangered;
        }

      }

      .send-input {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 642px;
        height: 100%;

        input {
          width: 100%;
          border-radius: 5px;
          padding: 6px 6px 6px 10px;
          border: none;
          background-color: #f7f7f7;
          outline-style: none;
        }

      }

      .send-do {
        margin-left: 12px;
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;

        button {
          cursor: pointer;
          width: 100%;
          height: 30px;
          border: none;
          background: blue;
          color: white;
          border-radius: 4px;
        }
      }

    }

    .right-select {
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;

      .select-item {
        cursor: pointer;
        color: grey;
        margin-left: 80px;
        width: max-content;
        height: 100%;
        position: relative;
      }

    }

    .right-request {
      padding-top: 12px;
      width: 100%;
      height: 300px;

      .params {
        width: 830px;
        height: 100%;
        padding-left: 20px;

        table {
          border-collapse: collapse;
          width: 100%;
        }

        table th, table td {
          padding: 15px;
          text-align: left;
          border-bottom: 1px solid #ddd;
        }

        table th, table td input {
          outline-style: none;
          border-radius: 4px;
          border: none;
          height: 26px;
          font-size: 14px;
        }

        table th {
          background-color: #f2f2f2;
          font-weight: bold;
          font-size: 1em;
        }

        table tr:nth-child(even) {
          background-color: #f9f9f9;
        }

        table tr:hover {
          background-color: #dbdbdb;
        }

      }
    }

  }

}

</style>